<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Practict Event</title><script type="text/javascript" src="js/jquery-1.7.1.js"></script>
</head>
<body>
	<form action="#" method="post">    <div>         <label for="name">Text Input:</label>         <input type="text" name="name" id="name" value="" tabindex="1" />    </div>	<div>		<label for="select-choice">Select Dropdown Choice:</label>		<select name="select-choice" id="select-choice">			<option value="Choice 1">Choice 1</option>			<option value="Choice 2">Choice 2</option>			<option value="Choice 3">Choice 3</option>		</select>	</div>		<div>		<label for="textarea">Textarea:</label>		<textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>	</div>		<div>	    <label for="checkbox">Checkbox:</label>		<input type="checkbox" name="checkbox" id="checkbox" />    </div>	<div>	    <input type="submit" value="Submit" />    </div></form>
<div id="data">
	<h2>Data</h2>
	<div id='newData'></div>   
</div>
<script type="text/javascript">
$(document).ready(function(){
		$('#name').focusout(function() {
					$('#newData').append($(this).val());
		});
		$('#select-choice').change(function() {
					var country = $(this).val();
					$('#newData').append('<br />'+$(this).val());
					
				});
		$('#textarea').focusout(function(){
			$('#newData').append('<br />'+$(this).val());
		});
		/*$('input[type="submit"]').click(function(){
			$("#newData").empty();
			return false;
		});*/
		$('form').submit(function(){
			//alert('submit form');
			$("#newData").empty();
			return false;
		});
});
	</script>
</body>
</html>